<!--
 * @Author: 叫我龟先生 yyxxkahhh@163.com
 * @Date: 2022-09-22 17:14:56
 * @LastEditors: 叫我龟先生 yyxxkahhh@163.com
 * @LastEditTime: 2022-09-24 11:31:15
 * @FilePath: \todolist\src\01.todo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <!-- 2.5自定义一个事件-->
    <!-- 9.1定义list ,再去子级里props-->
    <TodoHeader @addTask='addTaskFn'
    :list = 'list'
    ></TodoHeader>
    <!-- 自定义一个属性名 list-->
    <!-- 3.3自定义删除属性，给子组件传过去 -->
    <!-- 4.3 把list改成 showList-->
    <TodoMain :list="showList"
    @del='delFn'
    ></TodoMain>
    <!-- 5.1 -->
    <!-- 6.1 :len-->
    <!-- 7.2清除已完成，自定义事件 -->
    <TodoFooter
    @changeType = 'typeFn'
    :type='getSel'
    :len='showList.length'
    @clearTask='clearFn'
    ></TodoFooter>
  </section>
</template>

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"
    
import TodoHeader from "./components/TodoHeader";
import TodoMain from "./components/TodoMain";
import TodoFooter from "./components/TodoFooter";


export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      // list: [
      //   { id: 100, name: "吃饭", isDone: true },
      //   { id: 101, name: "睡觉", isDone: false },
      //   { id: 102, name: "打豆豆", isDone: true },
      // ],
      //4.1 默认打开就是all
      getSel:'all',
      //8.2
      list:JSON.parse(localStorage.getItem('todolist')) ||[],
    };
  },
  methods:{
    //addTaskFn事件
    addTaskFn(task){
      // console.log(task);
      this.list.push({
        //2.8当id的长度不是0，就在最后一位加一，如果是0，就从100开始
        id:this.list.length?this.list.at(-1).id+1:100,
        name:task,
        isDone:false
      })
    },
    //3.4自定义删除的方法
    delFn(id){
      // console.log(id);
      //过滤，数组的id不等于选中的id，就是false，就放到新的数组里，就是删除后的数组
      this.list=this.list.filter(item=>item.id !== id)
    },
    //5.2
    typeFn(type){
    this.getSel = type
    },
    //7.3添加清除事件的方法
    clearFn(){
      //已完成的过滤掉
      this.list = this.list.filter(item=>item.isDone === false)
    }
  },
  //4.2计算已完成未完成
    computed:{
      showList(){
        if(this.getSel === 'yes'){
          return this.list.filter(item =>item.isDone === true)
        }else if(this.getSel === 'no'){
          return this.list.filter(item =>item.isDone === false)
        }else{
          //else就是全部显示
          return this.list
        }
      }
    },
    //8.1
    watch:{
      list:{
        deep:true,
      handler(){
        localStorage.setItem('todolist',JSON.stringify(this.list))
      }
      },
      
    }
};
</script>